{% extends "static/view/template.html" %}
{% block body %}
<div class="container">

	<div class="page-header">
	</div>

	<div class="page-header">
        <h1> <font color= #333333><center>rDSN Web Studio</center></font>
			<small><center><a href="https://github.com/Microsoft/rDSN" ><font color= #778899>https://github.com/Microsoft/rDSN</font></a></center></small>
		</h1>
	</div>

</div>

<div class="jumbotron masthead"  style="background-image: url(img/background.jpg)">
	<div class="container">
		<h1><font color= white><center>rDSN</center></font></h1>
		<h3><font color= white><center>An open framework for quickly building and managing </center></font></h3>
		<h3><font color= white><center> high performance and robust distributed systems.</center></font></h3>

	</div>
</div>

<!--
<script src="js/liquidFillGauge.js" language="JavaScript"></script>
<div class="container-fluid bg-3 text-center bg-grey"> 
  <h2>Node Utility Overview</h2>
  <div class="row">
    <div class="col-sm-4">
      <h4>CPU Usage</h4>
<svg id="fillgauge1"  height="200"></svg>
    </div>
    <div class="col-sm-4">
    <h4>Memory Usage</h4>
<svg id="fillgauge2"  height="200"></svg>
    </div>
    <div class="col-sm-4"> 
      <h4>Disk Usage</h4>
<svg id="fillgauge3"  height="200"></svg>
    </div>
  </div>
</div>
<div class="container-fluid bg-3"> 
  <h2>Network I/O</h2>
   <table class="table">
    <thead>
      <tr>
        <th>bytes_sent</th>
        <th>bytes_recv</th>
        <th>packets_sent</th>
        <th>packets_recv</th>
        <th>errin</th>
        <th>errout</th>
        <th>dropin</th>
        <th>dropout</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><div id="networkio0"></div</td>
        <td><div id="networkio1"></div</td>
        <td><div id="networkio2"></div</td>
        <td><div id="networkio3"></div</td>
        <td><div id="networkio4"></div</td>
        <td><div id="networkio5"></div</td>
        <td><div id="networkio6"></div</td>
        <td><div id="networkio7"></div</td>
      </tr>
    </tbody>
  </table>
</div>
<script language="JavaScript">
var config1 = liquidFillGaugeDefaultSettings();
    config1.textVertPosition = 0.8;
    config1.waveAnimateTime = 1000;
    config1.waveHeight = 0.15;
    config1.waveAnimate = true;
    config1.waveOffset = 0.25;
    config1.valueCountUp = false;
    config1.waveRise = true;
    config1.waveHeightScaling = true;
    config1.waveCount = 1;
    config1.circleThickness = 0.1;
    config1.circleFillGap = 0.2;
    config1.circleColor = "#6DA398";
    var gauge1 = loadLiquidFillGauge("fillgauge1", 0,config1);
    var config2 = config1;
    config2.circleColor = "#088da5";
    config2.waveColor = "#008080";
    var gauge2 = loadLiquidFillGauge("fillgauge2", 0,config2);
    var config3 = config1;
    config3.circleColor = "#cdc3a9";
    config3.waveColor = "#925cd8";
    var gauge3 = loadLiquidFillGauge("fillgauge3", 0,config3);
    
NewValue();
    function NewValue(){
$.get("/api/psutil", function(data, status){
	var message = JSON.parse(data);
    gauge1.update(message.cpu);
    gauge2.update(message.memory);
    gauge3.update(message.disk);
    for (i = 0; i < 8; i++) { 
    document.getElementById("networkio"+i.toString()).innerHTML = message.networkio[i];
    }

    
    setTimeout(function () {
    NewValue();
}, 5000);
    });
    }

if(localStorage['target_meta_server']==undefined && localStorage['target_server']==undefined)
{
    alert('Please set target_server and target_meta_server in the setting!')
}
</script>

<style>
.container-fluid {
    padding: 60px 50px;
}
.logo {
    font-size: 200px;
}
@media screen and (max-width: 768px) {
    .col-sm-4 {
        text-align: center;
        margin: 25px 0;
    }
}

.logo-small {
    color: #005A31;
    font-size: 50px;
}

.logo {
    color: #005A31;
    font-size: 200px;
}
.bg-grey {
      background-color: #F9FCD7;
  }
</style>
<div class="container-fluid bg-grey">
  <div class="row">
    <div class="col-sm-8">
      <h2>New comers?</h2>
      <h4>Follow a simple guidance to fully understand the system</h4> 
      <button class="btn btn-default btn-lg" onclick='StartUpTour.start(true);'>Start Now</button>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-blackboard logo"></span>
    </div>
  </div>
</div>

<div class="container-fluid" >
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-education logo"></span> 
    </div>
    <div class="col-sm-8">
      <h2>Faster and stronger?</h2>
      <h4>We offer <strong>Solution Wizard</strong>, a set of profiling tools and solutions to imporve your system's performance</h4> 
      <p></p> 
    </div>
  </div>
</div>
<div class="container-fluid text-center bg-grey">
  <h2>Solution Wizard</h2>
  <h4>What we offer</h4>
  <br>
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-home logo-small"></span>
      <div id="StartUp_Start"></div>
      <h4><a href='javascript:StartUpTour.start(true);'>Quick Start-up</a></h4>
      <p>Follow a simple guidance to fully understand the system</p>
    </div>
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-pushpin logo-small"></span>
      <div id="TimeOut_Start"></div>
      <h4><a href='javascript:TimeOutTour.start();'>Time-out analysis</a></h4>
      <p>A complete solution for some external-facing tasks experiencing continuous time-outs</p>
    </div>
  </div>
</div>
-->
{% endblock %}
